import React from 'react'

// 引入地区的数据
import {areaList} from '@vant/area-data'
import cookie from 'react-cookies'
import { json } from 'react-router-dom'

const Profile = () =>
{
    // 初始化路由跳转对象
    let Cookie=JSON.stringify(React.$Cookie.load('LoginUser',{path:'/'})) !=='{}' ?JSON.parse(React.$Cookie.load('LoginUser',{path:'/'})):'{}'
    const navigate = React.$Router.useNavigate()

    // 设置登录后的状态
    const [LoginUser,setLoginUser] = React.useState(Cookie)

    const [form] = React.$Vant.Form.useForm()

    // 钩子函数
    React.useEffect(() => {
        let LoginUser = React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {}

        setLoginUser(LoginUser)
    },[])

    React.useEffect(() => {
        RegionInit()
    },[])

    // 头像状态
    const [avatar, SetAvatar] = React.useState([
        { url: LoginUser.avatar_text }
    ])

    // 性别
    const [GenderShow,SetGenderShow] = React.useState(false)

    // 性别数据
    const GenderList = [
        {
            text:'保密',
            value:0
        },
        {
            text:'男',
            value:1
        },
        {
            text:'女',
            value:2
        }
    ]

    // 更新性别方法
    const GenderConfirm = (_,e) => 
    {
        LoginUser.gender = e.value

        LoginUser.gender_text = e.text

        setLoginUser(LoginUser)

        SetGenderShow(false)
    }

    // 地区
    const [RegionShow,SetRegionShow] = React.useState(false)
    const [region,SetRegion] = React.useState('')
    const [code,SetCode] = React.useState([])

    // 初始化地区数据
    const RegionInit  = () =>
    {
        let region_text = ''
        let region_code = []

        if(LoginUser.province)
        {
            region_text = LoginUser.province_text + '-'
            region_code.push(LoginUser.province)
        }

        if(LoginUser.city)
        {
            region_text += LoginUser.city_text + '-'
            region_code.push(LoginUser.city)
        }

        if(LoginUser.district)
        {
            region_text += LoginUser.district_text
            region_code.push(LoginUser.district)
        }

        SetRegionShow(false)

        SetRegion(region_text)
        SetCode(region_code)
    }


    // 选择地区
    const RegionConfirm = (_,e) =>
    {
        let [province,city,district] = e

        if(province)
        {
            LoginUser.province_text = province.text

            LoginUser.province = province.value
        }

        if(city)
        {
            LoginUser.city_text = city.text

            LoginUser.city = city.value
        }

        if(district)
        {
            LoginUser.district_text = district.text

            LoginUser.district = district.value
        }

        RegionInit()

    }

    const onBack = () =>
    {
        navigate(-1)
    }

    // 头像
    const Avatar = () =>
    {
        if(LoginUser.avatar)
        {
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginUser.avatar_text} alt="" />
            )
        }else{
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src="/assets/images/toux.jpg" alt="" />
            )
        }
    }

    // 提交事件
    const onPofile = async (form) =>
    {
        console.log(form)

        // 封装数据
        let data = {
            id:LoginUser.id,
            nickname:form.nickname,
            email:form.email,
            gender:LoginUser.gender,
            province:LoginUser.province,
            city:LoginUser.city,
            district:LoginUser.district
        }

        // 判断是否更改密码
        if(form.password)
        {
            data.password = form.password
        }

        // 判断是否有更新头像
        if(form.avatar.length > 0 && form.avatar[0].file)
        {
            data.avatar = form.avatar[0].file
        }

        let result = await React.$Api.profile(data)

        if(result.code === 1)
        {
            React.$Cookie.save('LoginUser',result.data)
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {

                    

                    navigate('/user/base/index')
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    return (
        <>
            <div className='my_kuang'>
                {/* 导航栏 */}
                <React.$Vant.Sticky>
                    <React.$Vant.NavBar 
                        title='基本资料'
                        onClickLeft={onBack}
                    />
                </React.$Vant.Sticky>

                {/* 头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <Avatar />
                        </div>
                    </div>
                </div>

                {/* 表单内容 */}
                <div className='profile'>
                    <React.$Vant.Form form={form} onFinish={onPofile}>
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='mobile'
                            label='手机号'
                            initialValue={LoginUser.mobile}
                            colon
                        >
                            <React.$Vant.Input placeholder='请输入手机号' disabled />
                        </React.$Vant.Form.Item>

                        {/* 昵称 */}
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='nickname'
                            label='昵称'
                            initialValue={LoginUser.nickname}
                            colon
                            rules={[
                                {required:true, message: '请输入昵称'}
                            ]}
                        >
                            <React.$Vant.Input placeholder='请输入昵称'  />
                        </React.$Vant.Form.Item>

                        {/* 邮箱 */}
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='email'
                            label='邮箱'
                            initialValue={LoginUser.email || ''}
                            colon
                            rules={[
                                {required:true, message: '请输入邮箱'},
                                {type:'email', message: '请输入正确的邮箱格式'}
                            ]}
                        >
                            <React.$Vant.Input placeholder='请输入邮箱'  />
                        </React.$Vant.Form.Item>

                        {/* 密码 */}
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name="password"
                            label="密码"
                            colon
                        >
                            <React.$Vant.Input placeholder="留空,不修改密码" type="password" />
                        </React.$Vant.Form.Item>

                        {/* 性别 */}
                        <React.$Vant.Form.Item
                            label="性别"
                            labelWidth='3.5em'
                            labelAlign='right'
                            onClick={() => {SetGenderShow(true)}}
                            colon
                            isLink
                        >
                            <React.$Vant.Input placeholder="请选择性别" readonly value={LoginUser.gender_text} />
                        </React.$Vant.Form.Item>

                        <React.$Vant.Popup position="bottom" round visible={GenderShow} onClose={() => {SetGenderShow(false)}}>
                            <React.$Vant.Picker 
                                title="性别" 
                                columns={GenderList} 
                                defaultIndex={LoginUser.gender}
                                onConfirm={GenderConfirm} 
                                onCancel={() => {SetGenderShow(false)}}
                            />
                        </React.$Vant.Popup>

                        {/* 地区 */}
                        <React.$Vant.Form.Item
                            label="地区"
                            labelWidth='3.5em'
                            labelAlign='right'
                            onClick={() => {SetRegionShow(true)}}
                            colon
                            isLink
                        >
                            <React.$Vant.Input placeholder="请选择地区" readonly value={region} />
                        </React.$Vant.Form.Item>

                        <React.$Vant.Popup position="bottom" round visible={RegionShow} onClose={() => {SetRegionShow(false)}}>
                            <React.$Vant.Area 
                                title="选择地区"
                                value={code}
                                areaList={areaList} 
                                onConfirm={RegionConfirm}
                                onCancel={() => SetRegionShow(false)}
                            />
                        </React.$Vant.Popup>

                        {/* 上传头像 */}
                        <React.$Vant.Form.Item
                            label="头像"
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='avatar'
                            initialValue={
                                [
                                    {
                                        url:LoginUser.avatar_text
                                    }
                                ]
                            }
                        >
                            <React.$Vant.Uploader maxCount={1} value={avatar} />
                        </React.$Vant.Form.Item>

                        {/* 提交 */}
                        <div style={{width:'80%',margin:'0px auto'}}>
                            <React.$Vant.Button nativeType='submit' round block type='primary'>修改资料</React.$Vant.Button>
                        </div>
                    </React.$Vant.Form>
                </div>

            </div>
        </>
    )
}

export default Profile